import {Button, Pagination, Popconfirm, Space, Spin, Table, Tag} from 'antd';
import React, {Key, useEffect, useState} from 'react';
import {DeleteOutlined, UndoOutlined} from "@ant-design/icons";
import {ColumnsType} from "antd/es/table";
import {RandomColor} from "../../utils/ColorUtil";
import {strToTime} from "../../utils/time";
import {TableRowSelection} from "antd/es/table/interface";
import {PageResult, Post} from "../../utils/http";

interface GarbageItem {
    id: number;
    original_url: string;
    handle_url: string;
    cate_id: number;
    cate_name: string;
    title: string;
    tags: string;
    file_size: number;
    update_time: string;
    format: string;
    brief: string;
}

interface GarbageResult {
    page: number;
    limit: number;
    name?: string;
    cate_id?: number;
    total: number;
    data: GarbageItem[]
}

export const GarbagePage = () => {


    const columns:ColumnsType<GarbageItem> = [
        {
            key: 'title',
            dataIndex: 'title',
            title: '名称',
            ellipsis: true,
            align: 'center',
            width: '20%'
        },
        {
            key: 'cate_name',
            dataIndex: 'cate_name',
            title: '分类',
            ellipsis: true,
            align: 'center',
            width: '10%'
        },
        {
            key: 'tags',
            dataIndex: 'tags',
            title: '标签',
            align: 'center',
            width: '30%',
            render: (tags, record) => <Space>
                {tags.length > 0 && tags.split(",").map((item:string, index:number) => <Tag key={index} color={RandomColor()}>{item}</Tag>)}
            </Space>
        },
        {
            key: 'format',
            dataIndex: 'format',
            title: '格式',
            align: 'center',
            width: '10%'
        },
        {
            key: 'update_time',
            dataIndex: 'update_time',
            title: '时间',
            align: 'center',
            width: '20%',
            ellipsis: true,
            render: (update_time) => <span>{strToTime(update_time)}</span>
        },
        {
            key: 'active',
            title: '操作',
            align: 'center',
            width: '10%',
            render: (text, record, index) => <Space>
                <Button icon={<UndoOutlined />} size={"small"} type={'primary'}/>
                <Popconfirm
                    placement="topRight"
                    title="删除当前图片可在回收站中恢复，确认删除？"
                    okText="确定"
                    cancelText="取消"
                ><Button icon={<DeleteOutlined />} type={"primary"} size={"small"} danger /></Popconfirm>

            </Space>
        }
    ]

    const [spinning, setSpinning] = useState<boolean>(false)

    const [dataSource, setDataSource] = useState<GarbageResult>({
        page: 1, limit: 10, total: 0, data: []
    })

    const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);

    const rowSelection: TableRowSelection<GarbageItem> = {
        selectedRowKeys,
        onChange: (selectedRowKeys: Key[], selectedRows: GarbageItem[]) => {
            const ids = selectedRows.map(item => item.id)
            setSelectedRowKeys(ids)
        },
    };

    const loadGarbage = (page: number = 1, limit: number = 10, cate_id?: number, name?: string) => {
        setSpinning(true)
        Post<PageResult<GarbageItem>>('/api/garbage/page', {
            page: page,
            limit: limit,
            cate_id: cate_id,
            name: name
        }).then(res => {
            setSpinning(false)
            if (res.code === '100200') {
                setDataSource({
                    ...dataSource,
                    page: page,
                    limit: limit,
                    cate_id: cate_id,
                    name: name,
                    data: res.data.content,
                    total: res.data.total
                })
            }
        })
    }

    useEffect(() => {
        loadGarbage()
    }, [])

    return <div style={{paddingTop: '5px'}}>
        <Space style={{marginBottom: '8px'}}>
            <Button type="primary" size={'small'} icon={<UndoOutlined />}>批量还原</Button>
            <Button type="primary" danger size={'small'} icon={<DeleteOutlined />}>批量清空</Button>
        </Space>
        <Spin tip="Loading..." spinning={spinning}>
            <Table
                bordered
                size={'small'}
                columns={columns}
                dataSource={dataSource.data}
                rowSelection={rowSelection}
                rowKey={record => record.id}
                pagination={false}
            />
            <Pagination
                style={{marginTop: 8, textAlign: 'right'}}
                showSizeChanger
                defaultCurrent={1}
                total={dataSource.total}
            />
        </Spin>
    </div>
}